<template>
  <!--会签管理-我的审批-付款计划详情弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="disabled" class="scroll-view" style="height: 300px">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="选择项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
              <a-select placeholder="请选择项目" :value="model.projectName" @change="handleChange('project',$event)">
                <a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="选择部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departName">
              <a-select :disabled="model.projectId === ''" placeholder="请选择部门" :value="model.departName"
                @change="handleChange('depart',$event)" style="margin-right: 10px;">
                <a-select-option v-for="(item,index) in departList" :key="index" :value="item">
                  {{item.label}}
                </a-select-option>
              </a-select>

            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="选择人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approverName">
              <a-select :disabled="model.departId === ''" placeholder="请选择人员" :value="model.approverName"
                @change="handleChange('approver',$event)">
                <a-select-option v-for="(item,index) in approverList" :key="index" :value="item">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审批序号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">
              <a-select placeholder="请选择审批序号" :disabled="disabled" style="color: black;" v-model="model.number">
                <a-select-option v-for="(item,index) in counts" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="是否并行审核" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isParallel">
              <a-radio-group v-model="model.isParallel">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审批节点人数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="count">
              <a-input :disabled="disabled" v-model="model.count" style="color: black;"
                placeholder="请输入审批节点人数"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="20">
            <a-form-model-item label="是否需要上传修改附件功能" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isAttachment">
              <a-radio-group v-model="model.isAttachment">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
<script>
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import {
    validateDuplicateValue
  } from '@/utils/util'

  export default {
    name: 'WtBrandForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: true,
        required: false,
      },
    },
    data() {
      return {
        model: {
          templateId: '',
          approverName: '',
          approver: '',
          projectName: '',
          projectId: '',
          departName: '',
          departId: '',
          isParallel: 0,
          isAttachment: 0,
          count: '',
          number: ''
        },
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 8
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 13
          },
        },

        confirmLoading: false,
        validatorRules: {},
        levelOneOptions: [],
        departList: [], //部门列表
        approverList: [], //人员列表
        treeData: [],
        // fileList: [],
        treeData1: [],
        treeData2: [],
        treeData3: [],
        sel_obj: {},
        counts: 0,
        url: {
          add: "/countersign/wtCountersignTemplateProcess/add",
          edit: "/countersign/wtCountersignTemplateProcess/edit",
        },
        pageType:'',
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))

    },
    methods: {
      //获取数据字典
      Dict() {
        let _self = this;
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.levelOneOptions = [];
            let treeList = res.result
            this.levelOneOptions = [...treeList].map((v) => ({
              ...v,
              value: v.id,
              label: v.departName,
            }))
            if (!!this.model.projectId) {
              getAction(`/sys/sysDepart/getDepartListByParentId?parentId=${this.model.projectId}`).then((res2) => {
                if (res2.success) {
                  _self.departList = [];
                  let treeList2 = res2.result;
                  _self.departList = [...treeList2].map((v2) => ({
                    ...v2,
                    value: v2.id,
                    label: v2.departName,
                  }))
                  if (!!this.model.departId) {
                    getAction(`/sys/sysDepart/getUsersByDepartId?id=${this.model.departId}`).then((res3) => {
                      if (res3.success) {
                        _self.approverList = [];
                        let treeList3 = res3.result;
                        _self.approverList = [...treeList3].map((v3) => {
                          return {
                            ...v3,
                            value: v3.id,
                            label: v3.realname,
                          }
                        })
                        _self.$forceUpdate();
                      }
                    })
                  }
                }
              })
            }
          }
        })
      },
      handleChange(type, item) {
        console.log(1, type, item);
        let _self = this;
        if (type === 'project') {
          this.model.projectName = item.label;
          this.model.projectId = item.value;

          //清空联动数据
          this.model.departName = '';
          this.model.departId = '';
          this.model.approverName = '';
          this.model.approver = '';
          getAction(`/sys/sysDepart/getDepartListByParentId?parentId=${this.model.projectId}`).then((res) => {
            if (res.success) {
              _self.departList = [];
              let treeList = res.result;
              _self.$nextTick(() => {
                _self.departList = [...treeList].map((v) => {
                  return {
                    ...v,
                    value: v.id,
                    label: v.departName,
                  }
                })
                _self.$forceUpdate();
              })
            }
          })
        } else if (type === 'depart') {
          this.model.departName = item.label;
          this.model.departId = item.value;
          //清空联动数据
          this.model.approverName = '';
          this.model.approver = '';
          getAction(`/sys/sysDepart/getUsersByDepartId?id=${this.model.departId}`).then((
            res) => {
            if (res.success) {
              _self.approverList = [];
              let treeList = res.result;
              _self.$nextTick(() => {
                _self.approverList = [...treeList].map((v) => {
                  return {
                    ...v,
                    value: v.id,
                    label: v.realname,
                  }
                })
                _self.$forceUpdate();
              })

            }
          })
        } else if (type === 'approver') {
          this.model.approverName = item.label;
          this.model.approver = item.value;
        }
      },
      edit(type, record, obj) {
        console.log(44, type, record, obj);
        this.model = record;
        this.pageType = type;
        this.model.isParallel = parseInt(this.model.isParallel);
        this.model.isAttachment = parseInt(this.model.isAttachment);
        this.counts = parseInt(obj.approveHierarchy);
        this.sel_obj = obj;
        this.Dict();
      },
      add(type, record) {
        this.pageType = type;
        this.counts = parseInt(record.approveHierarchy);
        this.sel_obj = record;
        this.Dict();
      },
      submitForm() {
        const _self = this;
        _self.model.templateId = this.sel_obj.id;
        let params = {};
        let httpurl = ''
        if (this.pageType === 'add') {
          httpurl = this.url.add;
          params = this.model;
        } else if (this.pageType === 'edit') {
          httpurl = this.url.edit;
          params = this.model;
        }
        // 触发表单验证
        this.confirmLoading = true;
        console.log('提交表单', params)
        // debugger
        httpAction(httpurl, params, 'POST').then((res) => {
            if (res.success) {
              _self.$message.success(res.message)
              _self.$emit('ok')
            } else {
              _self.$message.warning(res.message)
            }
          })
          .finally(() => {
            _self.confirmLoading = false
          })
      },

    },
  }
</script>
<style scoped>
  .scroll-view {
    overflow: auto;
    overflow-y: scroll;
  }
</style>